<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>this指向问题</title>
  </head>
  <body>
    <script>
      // 1. 箭头函数

      //箭头函数的 this 是在创建它时外层 this 的指向。这里的重点有两个：
      // 创建箭头函数时，就已经确定了它的 this 指向。
      // 箭头函数内的 this 指向外层的 this。

      setTimeout(() => {
        console.log(this, 'this') //外层指向window
      })

      class text {
        constructor() {}
        haha() {
          setTimeout(() => {
            console.log(this, 'this22') //外层指向text
          })
        }
      }
      let s1 = new text()
      console.log(s1.haha(), 'text')

      // 2. new
      // 当使用 new 关键字调用函数时，函数中的 this 一定是 JS 创建的新对象。
      // function lala() {
      //   this.name = function () {
      //     console.log(this, 'this11') //通过 new 的方式，this 永远被绑定在新创建的对象上，任何方式都改变不了 this 的指向。
      //   }
      // }
      // let a = new lala()
      // console.log(a.name(), '调用')

      // 3. obj.对象调用

      // let obj = {
      //   name: 'edg牛逼',
      //   lala: function () {
      //     console.log(this, 'this') //谁调用了函数， this就指向谁，这里obj调用的 指向obj
      //   },
      // }
      // obj.lala()

      // 4. 直接调用
      // function haha() {
      //   console.log(this, 'this') //被直接调用时，this 将指向全局对象
      // }
      // haha()

      // 5. 不在函数里
      // 不在函数中的场景，可分为浏览器的 <script /> 标签里，或 Node.js 的模块文件里。
      // 在 <script /> 标签里，this 指向 Window。
      // 在 Node.js 的模块文件里，this 指向 Module 的默认导出对象，也就是 module.exports。
    </script>
  </body>
</html>
